<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义清单管理</title>
<!--  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
  <link rel="stylesheet" href="styles.css">
</head>

<body>
<div id="app">
  <el-container>
    <el-header>历史文化名人展示</el-header>
    <el-main>
      <el-table :data="lists" stripe>
        <el-table-column prop="xh" label="序号"></el-table-column>
        <el-table-column prop="name" label="名称"></el-table-column>
        <el-table-column prop="dynasty" label="朝代"></el-table-column>
        <el-table-column prop="gender" label="性别">
          <template slot-scope="scope">
            <if v-if="scope.row.gender == 1">男</if>
            <if v-else>女</if>
          </template>
        </el-table-column>
        <el-table-column prop="birthplace" label="出生地"></el-table-column>
        <el-table-column prop="masterpieces" label="代表作"></el-table-column>
        <el-table-column prop="mainAchievements" label="主要成就"></el-table-column>
      </el-table>
    </el-main>
  </el-container>
</div>
<script src="axios-0.18.0.js"></script>
<script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script >
  new Vue({
    el: '#app',
    data() {
      return {
        lists: []
      };
    },
    mounted(){
      this.fetchLists()
    },
    methods: {
      async fetchLists() {
        try {
          const response = await axios.get('lists.json');
          this.lists = response.data;
        } catch (error) {
          console.error('请求清单数据失败:', error);
        }
      }
    }
  });

</script>
</body>

</html>
